<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="http://cdn.staticfile.org/cesium/1.69.0/Widgets/widgets.css">
    <link rel="stylesheet" href="../css//index.css">
</head>

<body>
    <div class="fun-menu">
            <button onclick="start(2, false)">指定位置，不动</button>
            <button onclick="start(0, true)">开始</button>
            <button onclick="pause()">暂停</button>
            <button onclick="stop()">停止</button>
            <button onclick="getIndex()">获得当前位置</button>
            <button onclick="updateDelay()">更新切换速率</button>
        
    </div>
    <div id=cesiumContainer></div>

    <script src="http://cdn.staticfile.org/cesium/1.69.0/Cesium.js"></script>
    <script src="../libs/cpc/index.js"></script>
    <script>
        let cloudImageLayer = null;
        const map = new cpc.Map({
            container: "cesiumContainer",
            baseMaps: [
                "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
            ],
            cesium: {
                animation: false,
                timeline: false,
            },
            viewPort: {
                debugShowFramesPerSecond: true,
            },
        });
        create();

        function create() {
            const option = {
                name: "云图1",
                images: [
                    {
                        url:
                            "../images/cloudImage/SATE_L1_F2G_VISSR_MWB_NOM_FDI-202010160600.HDF.png",
                        xx: "其他属性"
                    },
                    {
                        url:
                            "../images/cloudImage/SATE_L1_F2G_VISSR_MWB_NOM_FDI-202010160700.HDF.png",
                    },
                    {
                        url:
                            "../images/cloudImage/SATE_L1_F2G_VISSR_MWB_NOM_FDI-202010160800.HDF.png",
                    },
                    {
                        url:
                            "../images/cloudImage/SATE_L1_F2G_VISSR_MWB_NOM_FDI-202010160900.HDF.png",
                    },
                    {
                        url:
                            "../images/cloudImage/SATE_L1_F2G_VISSR_MWB_NOM_FDI-202010161000.HDF.png",
                    },
                    {
                        url:
                            "../images/cloudImage/SATE_L1_F2G_VISSR_MWB_NOM_FDI-202010161300.HDF.png",
                    },
                    {
                        url:
                            "../images/cloudImage/SATE_L1_F2G_VISSR_MWB_NOM_FDI-202010161900.HDF.png",
                    },
                    {
                        url:
                            "../images/cloudImage/SATE_L1_F2G_VISSR_MWB_NOM_FDI-202010162100.HDF.png",
                    },
                ],
                positions: [
                    { x: 50, y: 0 },
                    { x: 145, y: 0 },
                    { x: 145, y: 60 },
                    { x: 50, y: 60 },
                ],
            };
            cloudImageLayer = new cpc.CloudImageLayer(option, 500);
            map.add(cloudImageLayer);
        }
        function start(index, isRun) {
            cloudImageLayer.start(index, isRun);
        }
        function pause() {
            cloudImageLayer.pause();
        }
        function stop() {
            cloudImageLayer.stop();
        }
        function stop() {
            cloudImageLayer.stop();
        }
        function getIndex() {
            console.log(cloudImageLayer.getAttribute(cloudImageLayer.index));
        }
        function updateDelay() {
            cloudImageLayer.delay = 3000;
        }
    </script>
</body>

</html>